<template>
  <div class="caselist">
    <div v-if="$route.path=='/case/caseList'">
      <div class="topnavsearch">
        <a-card
          :bordered="false"
          style="border-radius:8px;width: 100%;margin-right: 7px;"
          :bodyStyle="{padding:'10px'}">
          <div class="flex row_bet  searchbox">
            <div class="noborder">
              <a-space>
                <span>筛选：</span>
                <a-select
                  label-in-value
                  :default-value="{ key: '' }"
                  style="width: 100px"
                  @change="handleChange"
                >
                  <a-select-option :value="v.id" v-for="v in classList" :key="v.id">
                    {{ v.name }}
                  </a-select-option>
                </a-select>
                <span>排序：</span>
                <a-select
                  label-in-value
                  :default-value="{ key: 1 }"
                  style="width: 100px"
                  @change="handleChange2"
                >
                  <a-select-option :value="1">
                    发布时间
                  </a-select-option>
                  <a-select-option :value="2">
                    点赞次数
                  </a-select-option>
                  <a-select-option :value="3">
                    观看次数
                  </a-select-option>
                </a-select>
              </a-space>
            </div>
            <div class="flex row_center col_center">
              <a-input v-model="search" placeholder="案例标题/用户" allowClear style="width: 265px;"/>
              <a-button style="border-radius: 0 4px 4px 0;margin-left:0px;background-color: #F0F1F4;" @click="dosearch">
                搜索案例
              </a-button>
            </div>
          </div>
        </a-card>
        <a-button type="primary" style="height:50px;border-radius:8px" @click="goadd">
          发布案例
        </a-button>
      </div>
      <div style="padding-bottom: 15px;" v-resize="resize">
        <waterfall
          :col="col"
          :width="321"
          :gutterWidth="13"
          :data="arrdata"
          @loadmore="loadmore"
        >
          <template>
            <div class="cell_item" v-for="(item,index) in arrdata" :key="index">
              <a-card :bordered="false" style="border-radius:8px;margin-top:10px" :body-style="{padding:0}">
                <div class="cursor" @click="goinfo(item.id)">
                  <img
                    v-if="item.content"
                    :src="item.content"
                    alt="加载错误"
                    style="width:100%;border-radius: 6px 6px 0 0;"/>
                  <div class="item_body">
                    <div class="item_title">{{ item.title }}</div>
                    <div class="item_class">{{ item.class_name }}</div>
                    <div class="item_info">
                      <a-space>
                        <a-icon type="eye" :size="18"/>
                        {{ item.view }}
                        <a-icon type="message" :size="18"/>
                        {{ item.comments }}
                        <a-icon type="like" :size="18"/>
                        {{ item.zan }}
                      </a-space>
                    </div>
                    <a-divider style="margin:0"/>
                    <div class="item_footer">
                      <div class="flex">
                        <a-avatar :src="item.img" :size="25"/>
                        <div class="name">{{ item.user }}</div>
                      </div>
                      <div class="time">{{ item.date }}</div>
                    </div>
                  </div>
                </div>
              </a-card>
            </div>
            <div style="width:100%;height:60px;line-height:60px;text-align: center;">
              <a-spin v-if="ishave">
                <a-icon slot="indicator" type="loading" style="font-size: 40px" spin/>
              </a-spin>
              <div v-else style="font-size: 20px;font-weight: 600;">
                Sorry,暂无更多!
              </div>
            </div>
          </template>
        </waterfall>

      </div>
    </div>
    <router-view v-else></router-view>
  </div>
</template>
<script>
  import { getCaseList, getClassInfo } from '@/api/caseApi'
  import Waterfall from '@/components/WaterFall'

  export default {
    name: 'Caselist',
    components: {
      Waterfall
    },
    data () {
      return {
        classid: '',
        col: 4,
        sort: 1,
        num: 1,
        ishave: true,
        search: '',
        classList: [
          {
            id: '', // 序号
            name: '所有分类' // 分类名称
          }
        ],
        arrdata: [
          // {
          //   id: 1,
          //   date: '5天前', // 时间
          //   user: '王百顺', // 用户
          //   view: 109, // 浏览次数
          //   zan: '0', // 点赞次数
          //   title: '', // 标题
          //   content: 'img.letuilm.com/images/2020-09-15_1600160097_5f608161985e6.png', // 内容
          //   class_name: '数码家电', // 分类
          //   img: 'http://img.haodanku.com/headimg_15775_1591955585.jpg', // 头像
          //   comments: 0// 评论数
          // },
        ]
      }
    },
    directives: { // 使用局部注册指令的方式
      resize: { // 指令的名称
        bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象
          let width = ''
          let height = ''

          function isReize () {
            const style = document.defaultView.getComputedStyle(el)
            if (width !== style.width || height !== style.height) {
              binding.value() // 关键
            }
            width = style.width
            height = style.height
          }

          el.__vueSetInterval__ = setInterval(isReize, 300)
        },
        unbind (el) {
          clearInterval(el.__vueSetInterval__)
        }
      }
    },
    watch: {
      search: function (val) {
        console.log(val)
        if (val === '') {
          this.num = 1
          this.arrdata = []
          this.getCaseList(1, 15)
        }
      }
    },
    computed: {
      // itemWidth () {
      //   return (138 * 0.5 * (document.documentElement.clientWidth / 375))
      // },
      // gutterWidth () {
      //   return (9 * 0.5 * (document.documentElement.clientWidth / 375))
      // }
    },
    created () {
      this.getClassInfo()
      this.getCaseList(1, 15)
    },
    mounted () {

    },
    methods: {
      goadd () {
        this.$router.push(
          {
            path: '/case/addcase'
          }
        )
      },
      resize () { // 当宽高变化时就会执行
        // 执行某些操作
        const width = document.getElementById('vueWaterfall').offsetWidth
        console.log(width)
        const col = parseInt(width / (321 + 13))
        if (col !== this.col) {
          this.col = col
        }
        console.log(this.col)
      },
      goinfo (cid) {
        this.$router.push({
          path: '/case/caseInfo',
          query: {
            id: cid
          }
        })
      },
      dosearch () {
        // console.log(this.search)
        this.num = 1
        this.arrdata = []
        this.getCaseList(1, 15, this.search)
      },
      handleChange (value) {
        // console.log(value) //
        this.classid = value.key
        this.num = 1
        this.arrdata = []
        this.getCaseList(1, 15, this.search)
      },
      handleChange2 (value) {
        // console.log(value)
        this.sort = value.key
        this.num = 1
        this.arrdata = []
        this.getCaseList(1, 15, this.search)
      },
      loadmore (index) {
        console.log('触底')
        this.num++
        this.getCaseList(this.num, 15, this.search)
      },
      getClassInfo () {
        getClassInfo().then(res => {
          // console.log(res)
          this.classList.push(...res.data)
        }).catch(err => {
          console.log(err)
        })
      },
      handleMenuClick (e) {
        console.log('click', e)
      },
      getCaseList (page, pagesize, search) {
        getCaseList({
          page: page,
          pagesize: pagesize,
          class_id: this.classid,
          sort: this.sort,
          search: search
        }).then(res => {
          // console.log(res)
          const arr = res.data.data
          for (const i in arr) {
            if (arr[i].content.indexOf('img.letuilm.com') !== -1) {
              arr[i].content = arr[i].content.replace(/img.letuilm.com/g, `//img.letuilm.com`)
            }
            if (arr[i].content.indexOf('public/static') !== -1) {
              arr[i].content = arr[i].content.replace(
                /\/public\/static/g,
                `//zsxt.letuilm.com/public/static`
              )
            }
          }
          this.arrdata.push(...arr)
          if (res.data.max_page === parseInt(res.data.page)) {
            this.ishave = false
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>

  .caselist {
    position: relative;
    min-height: 100vh;
    .topnavsearch {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 99999;
    }

    .cell_item {
      color: #101010;
      font-size: 14px;

      .item_body {
        padding: 17px 22px 15px;

        .item_title {
        }

        .item_class {
          font-size: 12px;
          color: #BABDC1;
        }

        .item_info {
          padding: 18px 0 16px;
        }

        .item_footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;

          .name {
            margin-left: 5px;
          }

          .time {
            color: #BABDC1;
          }
        }
      }
    }

    .noborder {
      /deep/ .ant-select-selection {
        border: none;
      }
    }

    .searchbox {
      /deep/ .ant-input {
        border-radius: 4px 0 0 4px;
      }
    }
  }
</style>
